<template>
  <div>
    <header>
      <div class="header-tools-container">
        <div class="flex-items-center">
          <span class="tt-icon-tools-logo">
            <tt-icon-tools-logo></tt-icon-tools-logo>
          </span>
          <span class="tools-title">测试专用工具</span>
        </div>
        <ul class="flex-items-center right-tools-container">
          <li class="flex-items-center">
            <span class="right-tools-icon">
              <tt-icon-header-user></tt-icon-header-user>
            </span>
            <span class="right-tools-text"></span>
          </li>
          <li class="flex-items-center">
            <span class="login-out-btn"></span>
          </li>
        </ul>
      </div>
    </header>

    <main>
      <div class="tools-container">
        <!-- 自适应空间(左) -->
        <div class="tools-adapt-space-left"></div>
        <!-- 中间内容部分 -->
        <div class="tools-adapt-center">
          <div class="kinds-list-box" v-for="(item, index) in new Array(3)" :key="index">
            <p class="kinds-title-box flex-items-center">
              <span class="kinds-title">模拟类</span>
              <span class="kinds-more flex-items-center">
                <span>查看更多</span>
                <span class="kinds-more-icon">
                  <tt-icon-db-arrow-left></tt-icon-db-arrow-left>
                </span>
              </span>
            </p>
            <ul class="tool-cards-row">
              <template v-for="(item, index) in toolsData.list" :key="index">
                <li class="tool-card" :class="{ 'card-margin-right': (index + 1) % 3 !== 0 }">
                  <p class="tool-img">
                    <img
                      :src="!item._img_error ? item.img : cardDefaultImg"
                      alt=""
                      @error="imgLoadedError(index, item)"
                    />
                  </p>
                  <p class="tool-name">{{ item.name }}</p>
                  <div class="tool-description-box">
                    <p class="tool-description">{{ item.des.repeat(10) }}</p>
                    <div class="btn-group">
                      <el-button type="primary" class="tt-btn-primary tt-rd1">下载工具</el-button>
                      <el-button class="tt-btn-plain tt-rd1">使用文档</el-button>
                    </div>
                  </div>
                </li>
              </template>
            </ul>
          </div>
        </div>
        <!-- 自适应空间(右) -->
        <div class="tools-adapt-space-right"></div>
      </div>
    </main>

    <footer>
      <div class="footer-img"></div>
    </footer>
  </div>
</template>

<script lang="ts" setup>
import TtIconToolsLogo from 'icons/TtIconToolsLogo.vue'
import TtIconHeaderUser from 'icons/TtIconHeaderUser.vue'
import TtIconDbArrowLeft from 'icons/TtIconDbArrowLeft.vue'
import cardDefaultImg from '../../assets/image/toolsList/card_control.svg'
import cardStaticImg from '../../assets/image/toolsList/card_cube.svg'
import { ElButton } from 'element-plus'

import { reactive, toRefs } from 'vue'
interface ToolItemType {
  _img_error?: number
  id: number
  name: string
  des: string
  img: string
}
interface toolsDataType {
  list: Array<ToolItemType>
}
const toolsData = reactive<toolsDataType>({
  list: [
    {
      id: 1,
      img: '',
      name: '测试数据1',
      des: '这里是描述',
    },
    {
      id: 1,
      img: '',
      name: '测试数据2',
      des: '这里是描述',
    },
    {
      id: 1,
      img: '',
      name: '测试数据3',
      des: '这里是描述',
    },
    {
      id: 1,
      img: '',
      name: '测试数据3',
      des: '这里是描述',
    },
    {
      id: 1,
      img: '',
      name: '测试数据3',
      des: '这里是描述',
    },
    {
      id: 1,
      img: '',
      name: '测试数据3',
      des: '这里是描述',
    },
    {
      id: 1,
      img: '',
      name: '测试数据3',
      des: '这里是描述',
    },
    {
      id: 1,
      img: '',
      name: '测试数据3',
      des: '这里是描述',
    },
  ],
})

const imgLoadedError = (index: number, item: ToolItemType): void => {
  toolsData.list[index]._img_error = 1
}
</script>

<style lang="scss" scoped>
$page-min-width: 630px;
header {
  min-width: $page-min-width;
  height: 1.71rem;
  width: 100%;
  background-image: url('../../assets/image/toolsList/tools_header_bg.svg');
  background-repeat: no-repeat;
  background-position: top left;
  padding-top: 1px;
  box-sizing: border-box;
  .header-tools-container {
    margin-top: 0.41rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .tt-icon-tools-logo {
    display: inline-block;
    height: 0.3rem;
    width: 0.3rem;
    fill: #fff;
    margin-left: 0.67rem;
    margin-right: 0.1rem;
  }
  .tools-title {
    font-size: 0.34rem;
    font-family: 'PingFangSC-Medium, PingFang SC';
    font-weight: bold;
    color: #ffffff;
    line-height: 0.48rem;
  }
  .right-tools-container {
    margin-right: 0.68rem;
    > li {
      margin-left: 0.3rem;
    }
  }
  .login-out-btn {
    width: 0.27rem;
    height: 0.24rem;
    background: url('../../assets/image/toolsList/login_out.svg') no-repeat top left;
    cursor: pointer;
    @include BgHover();
  }
  .right-tools-icon {
    fill: #c4cad6;
    width: 0.18rem;
    height: 0.2rem;
    margin-right: 0.1rem;
  }
  .right-tools-text {
    color: #5a657c;
    font-size: 0.18rem;
    font-family: 'PingFangSC-Regular, PingFang SC';
    line-height: 0.25rem;
    cursor: default;
  }
}
main {
  min-width: $page-min-width;
  .tools-container {
    margin-top: 1.02rem;
    display: flex;
  }
  .tools-adapt-space-left {
    width: 3.59rem;
    min-width: 0.67rem;
  }
  .tools-adapt-space-right {
    width: 3.61rem;
    min-width: 0.68rem;
  }
  .tools-adapt-center {
    flex: 1;
  }
  .kinds-list-box:not(:last-child) {
    margin-bottom: 1.19rem;
  }
  .kinds-list-box:last-child {
    margin-bottom: 1.08rem;
  }
  .kinds-title-box {
    justify-content: space-between;
    font-family: 'PingFangSC-Medium, PingFang SC';
    .kinds-title {
      font-size: 0.24rem;
      font-weight: bold;
      color: #333333;
      line-height: 0.33rem;
      cursor: default;
    }
    .kinds-more {
      font-size: 0.15rem;
      color: #999999;
      line-height: 0.21rem;
      cursor: pointer;
      &:hover {
        color: darken(#999999, 10%);
        .kinds-more-icon {
          fill: darken(#d1d0d6, 10%);
        }
      }
      &:active {
        color: darken(#999999, 20%);
        .kinds-more-icon {
          fill: darken(#d1d0d6, 20%);
        }
      }
    }
    .kinds-more-icon {
      width: 0.1rem;
      height: 0.12rem;
      position: relative;
      overflow: hidden;
      margin-left: 0.1rem;
      transform: rotate(180deg);
      // >svg{
      fill: #d1d0d6;
      // }
    }
  }
  .tool-cards-row {
    margin-top: 0.29rem;
    // display: flex;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    column-gap: 1.21rem;
    row-gap: 0.2rem;
  }
  // .card-margin-right{
  // margin-right: 1.21rem;
  // }
  .tool-card {
    width: 3.19rem;
    height: 2.8rem;
    // margin-bottom: 0.2rem;
    background: #ffffff;
    box-shadow: 0.05rem 0.1rem 0.3rem 0 rgba(41, 26, 204, 0.12);
    border-radius: 0.06rem;
    padding-top: 0.01rem;
    box-sizing: border-box;

    .tool-img {
      width: 0.59rem;
      height: 0.59rem;
      margin-top: 0.45rem;
      margin-left: auto;
      margin-right: auto;
      > img {
        width: 100%;
        height: 100%;
      }
    }
    .tool-name {
      margin-top: 0.19rem;
      font-size: 0.22rem;
      font-weight: bold;
      color: #4a4a4a;
      line-height: 0.29rem;
      text-align: center;
      padding-left: 0.32rem;
      padding-right: 0.32rem;
      word-break: break-all;
      word-wrap: break-word;
      cursor: default;
    }
    .tool-description-box {
      height: 1.07rem;
      position: relative;
      &:hover {
        .tool-description {
          height: 0;
          visibility: none;
          opacity: 0;
        }
        .btn-group {
          height: 1.07rem;
          visibility: visible;
          opacity: 1;
        }
      }
    }
    .btn-group {
      overflow: hidden;
      visibility: none;
      opacity: 0;
      height: 0;
      transition: all 0.5s;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .tool-description {
      margin-top: 0.1rem;
      font-size: 0.16rem;
      font-weight: bold;
      color: #9b9b9b;
      line-height: 0.22rem;
      padding-left: 0.32rem;
      padding-right: 0.32rem;
      height: 1.07rem;
      overflow: hidden;
      text-overflow: ellipsis;
      cursor: default;
      transition: all 0.5s;
    }
    .tt-rd1 {
      border-radius: 0.01rem;
    }
  }
}
footer {
  height: 1.35rem;
  position: relative;
  .footer-img {
    height: 1.35rem;
    width: 10.41rem;
    background: url('../../assets/image/toolsList/footer.svg') no-repeat left top;
    position: absolute;
    bottom: 0;
    right: 0;
  }
}
</style>
